import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Modal,
    StatusBar,
    ScrollView,
    Image,
    TouchableWithoutFeedback,
    ActivityIndicator
} from 'react-native';
import request from '../request/request';
import Header from './header/Header';
import Loading from 'react-native-lindf-loading';
export default class OrderDetail extends Component{
	render(){
		const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
		return (
			<View>
				<Header isShowBack={true} title='我的订单' goBack={goBack} />
				<ScrollView>
					<View style={styles.detailTop}>
						<View style={styles.detailTopChild}>
							<Text style={styles.detailTopChildText}>待收货</Text>
							<Image 
	                            style={{width: 202, height: 84}}
	                            source={require('../images/orderDetailIco.png')}
	                        />
						</View>
					</View>
					<View style={styles.detailContent}>
						<View style={styles.detailAddress}>
							<View style={{width: 21, height: 32, justifyContent: 'center',marginRight: 10}}>
								<Image 
		                            style={{width: 21, height: 31}}
		                            source={require('../images/shouhuo.png')}
                        		/>
							</View>
							<View style={{flex: 1}}>
								<View style={styles.detailAddressTop}>
									<Text style={styles.detailAddressTopText}>收货人：林帅帅</Text>
									<Text style={styles.detailAddressTopText}>18084621629</Text>
								</View>
								<View style={styles.detailAddressBottom}>
									<Text style={styles.detailAddressTopText}>收货地址：广东省深圳市宝安区西乡街道固戍街道广东省深圳市宝安区西乡街道固戍街道</Text>
								</View>
							</View>
						</View>

						<View style={styles.detailShop}>
							<View style={styles.itemBox}>
								<View style={styles.itemChild}>
		                            <View style={styles.itemChildCenter}>
		                                <Image 
		                                    style={styles.itemChildCenterImg}
		                                    source={{uri: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg'}}
		                                />
		                            </View>
		                            <View style={styles.itemChildBottom}>
		                                <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
		                                <View>
		                                    <View style={styles.itemChildBottomBox}>
		                                        <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2800}</Text>
		                                        <Text style={styles.itemChildBottomBoxText}>{'x' + 1}</Text>
		                                    </View>
		                                </View>
		                            </View>
		                        </View>
							</View>

							<View style={styles.itemBox}>
								<View style={styles.itemChild}>
		                            <View style={styles.itemChildCenter}>
		                                <Image 
		                                    style={styles.itemChildCenterImg}
		                                    source={{uri: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg'}}
		                                />
		                            </View>
		                            <View style={styles.itemChildBottom}>
		                                <Text numberOfLines={2} style={styles.itemChildBottomText}>这是标题这是标题这是标题这是标题题这是标题这是标题题</Text>
		                                <View>
		                                    <View style={styles.itemChildBottomBox}>
		                                        <Text style={styles.itemChildBottomBoxPrice}>{'￥' + 2800}</Text>
		                                        <Text style={styles.itemChildBottomBoxText}>{'x' + 1}</Text>
		                                    </View>
		                                </View>
		                            </View>
		                        </View>
							</View>
						</View>

						<View style={styles.shopInfo}>
							<View style={styles.shopInfoItem}>
								<Text style={styles.shopInfoItemText}>配送方式：快递</Text>
								<Text style={styles.shopInfoItemText}>免运费</Text>
							</View>
						</View>

						<View style={styles.shopInfo}>
							<View style={[styles.shopInfoItem, styles.shopInfoItemWords]}>
								<Text style={styles.shopInfoItemText}>买家留言：</Text>
								<Text style={[styles.shopInfoItemText,{flex: 1}]}>快点发货快点发货快点发货快点发货快点发货快点发货快点发货快点发货快点发货快点发货</Text>
							</View>
						</View>

						<View style={styles.shopInfo}>
							<View style={styles.shopInfoItem}>
								<Text style={styles.shopInfoItemText}>小计：</Text>
								<Text style={styles.itemChildBottomBoxPrice}>{'￥' + 5600}</Text>
							</View>
						</View>

						<View style={styles.shopInfo}>
							<View style={[styles.shopInfoItem, styles.shopInfoItemCode]}>
								<Text style={styles.shopInfoItemText}>订单编号：</Text>
								<Text style={styles.shopInfoItemText}>34534385346844768778</Text>
							</View>
							<View style={[styles.shopInfoItem, styles.shopInfoItemCode]}>
								<Text style={styles.shopInfoItemText}>创建时间：</Text>
								<Text style={styles.shopInfoItemText}>2018-04-01 15:30</Text>
							</View>
							<View style={[styles.shopInfoItem, styles.shopInfoItemCode]}>
								<Text style={styles.shopInfoItemText}>支付时间：</Text>
								<Text style={styles.shopInfoItemText}>2018-04-01 16:30</Text>
							</View>
						</View>
					</View>
				</ScrollView>
			</View>
		)
	}
}

const styles = StyleSheet.create({
    detailTop: {
    	backgroundColor: '#5757cd',
    	paddingTop: 10,
    	paddingBottom: 10,
    	paddingLeft: 20,
    	paddingRight: 20,
    },
    detailTopChild: {
    	flexDirection: 'row',
    	justifyContent: 'space-between',
    	alignItems: 'center',
    },
    detailTopChildText: {
    	fontSize: 15,
    	color: '#000'
    },
    detailContent: {
    	paddingBottom: 44,
    	backgroundColor: '#fff'
    },
    detailAddress: {
    	backgroundColor: '#fff',
    	paddingTop: 12,
    	paddingBottom: 12,
    	paddingLeft: 15,
    	paddingRight: 15,
    	// marginBottom: 10,
    	flexDirection: 'row',
    	alignItems: 'center',
    	borderBottomWidth: 1,
    	borderColor: '#eee'
    },
    detailShop: {
    	// marginBottom: 10,
    },
    detailAddressTop: {
    	flexDirection: 'row',
    	justifyContent: 'space-between',
    	alignItems: 'center',
    	marginBottom: 8
    },
    detailAddressTopText: {
    	fontSize: 13,
    	lineHeight: 16,
    	color: '#5a5a5a'
    },
    detailAddressBottom: {
    	flexDirection: 'row',
    	alignItems: 'flex-start'
    },
    itemBox: {borderBottomWidth: 1, borderColor: '#eee',paddingLeft: 7, backgroundColor: '#fff'},
    itemChild: {height: 92, paddingLeft: 8, paddingTop: 8, paddingBottom: 8, backgroundColor: '#ffffff', flexDirection: 'row'},
    itemChildTopText: {width: 11, height: 11, alignItems: 'center', backgroundColor: '#0048c2', borderRadius: 100},
    itemChildTopTextActiveColor: {backgroundColor: '#0048c2'},
    itemChildTopTextColor: {backgroundColor: '#b6b6b6'},
    itemChildCenter: {width: 85, height: 75,marginRight: 10},
    itemChildCenterImg: {width: 85, height: 75},
    itemChildBottom: {flex: 1, paddingRight: 12, justifyContent: 'space-between'},
    itemChildBottomText: {fontSize: 13, color: '#3a3a3a'},
    itemChildBottomBox: {flexDirection: 'row', justifyContent: 'space-between'},
    itemChildBottomBoxText: {fontSize: 11, color: '#828282'},
    itemChildBottomBoxPrice: {fontSize: 12, color: '#fd0408'},
    itemChildNext: {height: 38, paddingTop: 5, paddingBottom: 5, backgroundColor: '#fff', flexDirection: 'row', justifyContent: 'flex-end'},
    itemChildNextView: {minWidth: 65, borderWidth: 1, borderColor: '#eee', borderRadius: 20, justifyContent: 'center', alignItems: 'center', marginRight: 10},
    itemChildNextViewText: {fontSize: 12},
    shopInfo: {
    	backgroundColor: '#fff',
    	paddingTop: 8,
    	paddingBottom: 8,
    	paddingLeft: 15,
    	paddingRight: 15,
    	// marginBottom: 10,
    	borderBottomWidth: 1,
    	borderColor: '#eee'
    },
    shopInfoItem: {
    	flexDirection: 'row',
    	justifyContent: 'space-between',
    	alignItems: 'center'
    },
    shopInfoItemText: {
    	fontSize: 12,
    	lineHeight: 21,
    	color: '#8b8b8b'
    },
    shopInfoItemCode: {
    	justifyContent: 'flex-start',
    },
    shopInfoItemWords: {
    	justifyContent: 'flex-start',
    	alignItems: 'flex-start'
    },
})